﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>form events</title>
    <style>
        div {
            padding: 16px;
        }

        .focus, .blur, .change, .select {
            color: white;
            border: 1px solid red;
            background-color: blue;
            padding: 8px;
            margin: 8px;
        }
    </style>
</head>
<body>
    <form name="testing" action="#">
        <div>
            TextBox : <input type="text" size="50" />
        </div>
        <div>
            <label style="float:left">TextArea : </label>
            <textarea cols="30" rows="5"></textarea>
        </div>
        <div>
            Radio : <input name="sex" type="radio" value="Male" checked />Male
            <input name="sex" type="radio" value="Female" />Female
        </div>
        <div>
            CheckBox : <input type="checkbox" name="checkme" />Check Me
        </div>

        <div>
            Country : <select id="country">
                <option value="China">China</option>
                <option value="United State">United State</option>
            </select>
        </div>

        <div>
            <input type="submit" /> <input type="reset" />
        </div>

    </form>
</body>
</html>
<script src="Scripts/jquery-2.1.4.js"></script>
<script language="javascript">
    $("input,select,textarea").focus(function () {

        $(this).after("<span class='focus'> focus() triggered! </span>");
        $("span").filter('.focus').fadeOut(4000);

    });

    $("input,select,textarea").blur(function () {

        $(this).after("<span class='blur'> blur() triggered! </span>");
        $("span").filter('.blur').fadeOut(4000);

    });

    $("input,select,textarea").change(function () {

        $(this).after("<span class='change'> change() triggered! </span>");
        $("span").filter('.change').fadeOut(4000);

    });

    $("input,textarea").select(function () {

        $(this).after("<span class='select'> select() triggered! </span>");
        $("span").filter('.select').fadeOut(4000);

    });

    $("form").submit(function () {

        alert('Form submitted!');

    });

</script>